<script setup lang="ts">
import { ref, reactive, watch, computed } from "vue"
import { addWhiteLinkApi, getNotCertifiedWhiteApi, getPersionNotCertifiedWhiteApi } from "#/api/certificate/white-link"
import { getCertifiedListApi } from "#/api/certificate/list"
import {$t} from '#/locales'

defineOptions({ name: 'Dialog' })

const formRef = ref()
const emit = defineEmits(['queryTable'])
const submitLoading = ref(false)
const tableData = ref<any>([])
const listData = ref<any>([])
const dialogVisible = ref(false)
const title = ref()
const memberInfo = ref<any>()

interface FormInline {
  userId: string[],
  certificate: string[];
}
const formInline = reactive<FormInline>({
  userId: [],
  certificate: []
})

const rules = {
  userId: [{ required: true, message: $t('common.selectPhTxt', [$t('whiteLink.memberNameTxt')]), trigger: 'change' }],
  certificate: [{ required: true, message: $t('common.selectPhTxt', [$t('whiteLink.certifiedNameTxt')]), trigger: 'change' }],
}

const handleClose = () => {
  formInline.userId = []
  formInline.certificate = []
  dialogVisible.value = false
  memberInfo.value = null
  formRef.value?.resetFields()
}

const inint = (data: any = null) => {
  title.value = data ? $t('common.editTxt') : $t('common.newTxt')
  memberInfo.value = data
  if (data) {
    formInline.userId = [data?.userId]
    // formInline.certificate = data?.certified.map((item: { certificationId: string }) => item.certificationId)
  }
  dialogVisible.value = true

}
const submit = () => {
  if (!formRef) return
  formRef.value?.validate((valid: any) => {
    if (valid) {
      const userId = formInline.userId
      const certifiedIds = formInline.certificate
      submitLoading.value = true
      addWhiteLinkApi({ userIds: userId, certifiedIds }).then(() => {
        handleClose()
        dialogVisible.value = false
        emit('queryTable')
      }).finally(() => {
        submitLoading.value = false
      })
    }
  })

}


const getUserList = () => {
  const params = {}
  getNotCertifiedWhiteApi(params).then((res) => {
    const data = res;
    if (data) {
      tableData.value = data.map((_: { nameCn: any, id: any, phone: any }) => { return { name: _.nameCn || '--', userId: _.id, phone: _.phone || '--' } })
    }
  })
}

const getListData = () => {
  const API = title.value === $t('common.editTxt') ? getPersionNotCertifiedWhiteApi({ userId: memberInfo.value.userId }) : getCertifiedListApi({})
  API.then(res => {
    listData.value = title.value === $t('common.editTxt') ? res : res.data
  }).finally(() => {
  })
}

watch(dialogVisible, () => {
  if (dialogVisible?.value) {
    getUserList()
    getListData()
  }
});


defineExpose({ inint })

</script>
<template>
  <el-dialog v-model="dialogVisible" align-center :destroy-on-close="true" :title="title === $t('common.newTxt') ? `${title}` : $t('common.newTxt')" width="500"
    :append-to-body="true" :close-on-click-modal="false" :before-close="handleClose">
    <el-form ref="formRef" :rules="rules" :model="formInline">
      <el-form-item :label="$t('whiteLink.memberNameTxt')" prop="userId">
        <div v-if="title === $t('common.editTxt')">{{ memberInfo?.name }}</div>
        <el-select v-else filterable :disabled="title === $t('common.editTxt')" multiple clearable
          v-model="formInline.userId" :placeholder="$t('common.selectPhTxt', [$t('whiteLink.memberNameTxt')])" style="width: 100%">
          <el-option v-for="item in tableData" :key="item.userId" :label="`${item.name} ${item.phone}`" :value="item.userId" />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('whiteLink.certifiedNameTxt')" prop="certificate">
        <el-select :fit-input-width="true" filterable clearable v-model="formInline.certificate" multiple
          :placeholder="$t('common.selectPhTxt', [$t('whiteLink.certifiedNameTxt')])" style="width: 100%">
          <el-option v-for="item in listData" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">
          {{$t('common.cancelTxt')}}
        </el-button>
        <el-button type="primary" @click="submit" :loading="submitLoading">
          {{$t('common.submitTxt')}}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style lang="less" scoped></style>
